<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue'


function handleJumpView(name: string) {
    window.open(`${import.meta.env.VITE_APP_WEB_URL}/${name}`)
}

</script>

<template>
    <div class="service">
        <el-popover placement="top-end" trigger="hover" :popper-style="{ width: '190px', padding: 0 }">
            <template #reference>
                <el-icon color="#DBDBDB" size="45px">
                    <QuestionFilled />
                </el-icon>
            </template>
            <div class="service-box">
                <div class="phone">
                    <p>客服热线：</p>
                    <p>18908478801</p>
                </div>
                <div class="service-box-item"  @click="handleJumpView('service')">
                    <img src="./images/icon-1.png" alt="icon">
                    <p>在线客服</p>
                </div>
                <div class="service-box-item" @click="handleJumpView('help')">
                    <img src="./images/icon-2.png" alt="icon">
                    <p>帮助中心</p>
                </div>
                <div class="service-box-item" @click="handleJumpView('feedback')">
                    <img src="./images/icon-3.png" alt="icon">
                    <p>需求反馈</p>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<style lang="scss" scoped>
.service-box {
    background-color: #F5F7FA;
    overflow: hidden;

    .phone {
        line-height: 23px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: center;
        padding: 10px 0;
    }

    .service-box-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        gap: 0 10px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
            display: block;
        }
    }
}

.service {
    position: fixed;
    right: 30px;
    bottom: 30px;
    background-color: #ffffff;
    z-index: 35;
    height: 45px;
    border-radius: 50%;
}
</style>
